<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			body{
				background: #000;
			}
			
		</style>
	</head>
	<body>
		
		<div id="app"></div>
		<script type="text/javascript">

			;(function(){
				function CricleProgress(el,config){
					var _config = config?config:{};
					var defaultConfig ={
						width:300,
						progress:0,
						bgColor:'#eee',
						progressColor:'#228B22',
						lineWidth:10,
						lineCap:'round',
						offset:0
					} 
					
					this.cfg=Object.assign(defaultConfig,_config)
					this.el = document.querySelector(el);
					this.init()
					
					this.tempStart=0
					this.setVal(this.cfg.progress)
				}
				// 初始化
				CricleProgress.prototype.init=function(){
					var canvas = document.createElement('canvas')
					canvas.setAttribute('width',this.cfg.width+'px')
					canvas.setAttribute('height',this.cfg.width+'px')
					this.el.appendChild(canvas)
					this.ctx = canvas.getContext('2d')
					this.theme()
				}
				// 设置样式
				CricleProgress.prototype.theme = function(){
					this.ctx.lineWidth=this.cfg.lineWidth
					this.ctx.lineCap=this.cfg.lineCap
				}
				// 背景圆环
				CricleProgress.prototype.bgCricle=function(){
					this.ctx.clearRect(0,0,this.cfg.width,this.cfg.width)
					this.ctx.beginPath()
					this.ctx.save()
					this.ctx.strokeStyle=this.cfg.bgColor
					var x= this.cfg.width/2
					var y= this.cfg.width/2
					var r = this.cfg.width/2-this.cfg.lineWidth
					var start =90+this.cfg.offset
					var end = 360+90-this.cfg.offset
					
					this.ctx.arc(x,y,r,start*Math.PI/180,end*Math.PI/180,false)
					this.ctx.stroke()
					this.ctx.restore()
				}
				// 进度圆环
				CricleProgress.prototype.progressCricle=function(value){
					this.ctx.beginPath()
					this.ctx.strokeStyle=this.cfg.progressColor
					var x= this.cfg.width/2
					var y= this.cfg.width/2
					var r = this.cfg.width/2-this.cfg.lineWidth
					var start =90+this.cfg.offset
					var endvalue = value
					this.ctx.arc(x,y,r,start*Math.PI/180,endvalue*Math.PI/180,false)
					this.ctx.stroke()
				}
				// 设置值
				CricleProgress.prototype.setVal=function(value){
					var _this = this
					var tempStart=_this.tempStart
// 					var start = tempStart?tempStart:(90+this.cfg.offset)
// 					var end = ((360+90-this.cfg.offset)-start)*value+start
					var start = 90+this.cfg.offset
					var end = ((360+90-this.cfg.offset)-start)*value+start

					for (var i = start; i <= end; i++) {
						(function(i){
							_this.bgCricle()
							_this.progressCricle(start)

							setTimeout(function(){
								_this.bgCricle()
								
								_this.progressCricle(i)
								_this.tempStart = i
							},(i*1000/end))
							
						})(i)
					}
					
				}
				window.CricleProgress=CricleProgress
			})()
			
			var c = new CricleProgress('#app',{
					width:200,
					lineWidth:10,
					progress:0,
					progressColor:'red',
					bgColor:'rgba(255,255,255,0.3)',
					offset:0
				}
			)
			setTimeout(function(){
				c.setVal(0.5)
				
			},1000)
			
		</script>
	</body>
</html>
